<template>
    <div class="big-box">

    </div>
    <div class="contentbox">
        <div class="pageheader"> 
            <div class="titlee"><span>友链</span></div>
            <img src="http://imgfile.xxkdjy.top/qwerty.jpg">
        </div>
        <div class="xx"></div>
        <div class="content" id="content">
            <a class="frienditem" v-for="item in friendlist" :href="item.url">
                <div class="leftimg">
                    <img :src="item.corver" alt="">
                </div>
                <div class="righttext">
                    <p class="title">{{ item.name }}</p>
                    <p class="discrib">{{ item.sign }}</p>
                </div>
            </a>

        </div>
        <div class="apply">
            <div class="top">
                <div class="item">
                    <span>昵称:</span>
                    <el-input v-model="form.friend_name" placeholder="昵称(必填)" />
                </div>
                <div class="item">
                    <span>签名:</span>
                    <el-input v-model="form.friend_sign" placeholder="签名(必填)" />
                </div>
                <div class="item">
                    <span>地址:</span>
                    <el-input v-model="form.friend_url" placeholder="地址(必填)" />
                </div>
                <div class="note item">
                    <span>备注:</span>
                    <el-input v-model="form.friend_note" placeholder="备注" />
                </div>
                <div style="display: flex; align-items:center;">
                    <span style="margin-right: 10px;font-family: 'xxk';">头像:</span>
                    <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="handleChange"
                        :class="[showadd ? '' : 'hide-upload']" v-model:file-list="myfile">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                    <el-button type="primary" style="margin-left: 10px;" size="small" @click="subapply">提交</el-button>
                </div>
            </div>
            <div class="ditil">
                <p>申请也记得把
                    <span style="color: rgb(225, 107, 133);">博主的小站</span> 添加到 <span
                        style="color: rgb(225, 107, 133);">贵站</span>
                    的友链下面去哦
                </p>
            </div>
            <div class="MySite">
                <ul>
                    <li><span>站名:</span>{{ user.title }}</li>
                    <li><span>签名:</span>{{ user.Bolog_sign }}</li>
                    <li><span>地址:</span>http://xxkbolg.top/</li>
                    <li><span>头像:</span>
                        <p>{{ user.touxiang }}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup>
import {
    addfriend,
    getQiniuToken,
    getfriends
} from '@/api/friend.js'
import { uploadqiniu } from "@/utils/index"
import { isRef, onMounted, ref, watch } from 'vue'
import { throttle } from "@/utils/index.js"
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import { getconfig } from "@/api/user.js"
let friendlist = ref([])
let myfile = ref([])
let showadd = ref(true)
let throttlefun = throttle()
let page = ref(1)
let pageSize = ref(20)
let form = ref({
    friend_name: "",
    friend_sign: "",
    friend_url: "",
    friend_note: ""
})
let user = ref({
    url:"",
    Bolog_sign:"",
    touxiang:"",
    title:""
})
let isend = ref(false)
const handleRemove = (file) => {
    myfile.value = []
}
const handleChange = (file) => {
    myfile.value.push(file)
}
/* 提交表单 */
async function subapply() {
    if (form.value.friend_name == "" || form.value.friend_sign == "" || form.value.friend_url == "" || myfile.value.length == 0) {
        return ElMessage.error("请填写完整信息")
    } else {
        /* 参数校验通过 获取七牛云的token */
        let data = await getQiniuToken();
        let qiniuToken
        /* 获取七牛云的token成功 */
        if (data.data.status == 200) {
            qiniuToken = data.data.data.uploadToken;
            let Checkuploadlist = await uploadqiniu(qiniuToken, myfile.value)
            if (Checkuploadlist[0].status == 200) {
                /* 上传文件成功 添加文件名字给后端*/
                let ok = await addfriend({
                    friend_name: form.value.friend_name,
                    friend_url: form.value.friend_url,
                    friend_sign: form.value.friend_sign,
                    friend_corver: import.meta.env.VITE_BASEIMG_RUL + Checkuploadlist[0].data.key,
                    friend_note: form.value.friend_note
                })
                if (ok.data.status == 200) {
                    ElMessage.success("添加成功")
                    reset()
                }
            }
        }

    }

}
/* 重置 */
function reset() {
    form.value.friend_name = ""
    form.value.friend_sign = ""
    form.value.friend_url = ""
    form.value.friend_note = ""
    myfile.value = []
}
watch(myfile, (newval, oldval) => {
    if (newval.length > 0) {
        showadd.value = false
    } else {
        showadd.value = true
    }
})
onMounted(async () => {
    await getfriend()
    /* 无线滚动的 */
    let contentRef = document.getElementById('content')
    let contentRefHeight = contentRef.clientHeight
    let scrollHeight = contentRef.scrollHeight
    contentRef.addEventListener("scroll", (e) => {
        throttlefun(async () => {
            let scrollTop = content.scrollTop
            let distance = scrollHeight - contentRefHeight - scrollTop
            if (distance < 20 && isend.value == false) {
                /* 记载数据 */
                page.value++
                await getfriend()
            }
        }, 100)
    })
    let res = await getconfig()
    if (res.data.status == 200) {
        user.value.url = res.data.data.data.Bolog_bkimg
        user.value.Bolog_sign = res.data.data.data.Bolog_sign
        user.value.touxiang = res.data.data.user.Users_corver
        user.value.title = res.data.data.user.Users_name
    }
})
async function getfriend() {
    let res = await getfriends({
        page: page.value,
        pageSize: pageSize.value,
        friend_status: 1
    })
    if (res.data.status == 200) {
        let ress = res.data.data.map(item => {
            return {
                id: item.id,
                url: item.friend_url,
                sign: item.friend_sign,
                name: item.friend_name,
                corver: item.friend_corver
            }
        })
        friendlist.value = friendlist.value.concat(ress)
    } else {
        isend.value = true
        ElNotification.warning({
            title: 'warning',
            message: '暂无数据',
            offset: 50,
        })
    }
} 
</script>

<style lang="scss" scoped>
.titlee {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
    font-size: 30px;
    letter-spacing: .1vmax;
    z-index: 110;
    span {
        background-image: -webkit-linear-gradient(bottom, #b3a8d0, #f8d3a0, #d7999c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    @include userTheme {
        font-family: getThemeValue("fontfamily");
        color: getThemeValue("fontColor");
    }

    font-weight: 700;
}
.hide-upload {
    :deep(.el-upload--picture-card) {
        display: none;
    }
}

.avatar-uploader .el-upload {
    border: 1px dashed #c74418;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

}

:deep(.el-upload) {
    border: 1px dashed #706b69;
}

.avatar-uploader .el-upload:hover {
    border-color: #fac03d;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #1863cb;
    width: 178px;
    height: 178px;
    text-align: center;
}

.big-box {
    width: 100vw;
    height: 100vh;
    padding-bottom: 10px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
    @include bk-style;
}

.contentbox {
    width: 100%;
    position: relative;

    .xx {
        height: 250px;
        z-index: -1;
    }

    .pageheader {
        height: 350px;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;

        &::after {
            height: 100%;
            width: 100%;
            content: "";
            position: absolute;
            top: 0;
            left: 0;

            @include userTheme {
                background-color: getThemeValue("imgmask");
            }
        }

        img {
            object-fit: cover;
            height: 100%;
            width: 100%;
            filter: blur(2px);
            opacity: 0.9;
        }
    }

    .content {
        border-radius: 15px;
        padding-top: 300px;
        min-height: 300px;
        width: 70%;
        margin: 0 auto;

        @include userTheme {
            background-color: getThemeValue("FriendColor");
            color: getThemeValue("fontColor");
        }

        padding: 15px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: start;
        align-content: start;
        max-height: 400px;
        overflow-y: scroll;

        &::-webkit-scrollbar {
            /*隐藏滚轮*/
            display: none;
        }

        .frienditem {
            flex: 1;
            max-width: 220px;
            min-width: 200px;
            background-color: #fff;
            height: 80px;
            border-radius: 10px;
            margin: 5px;
            display: flex;
            justify-content: space-between;
            padding: 10px;
            flex-direction: row;
            transition: all 0.5s ease-in-out;

            &:hover .leftimg {
                width: 0;
                height: 0;
                opacity: 0;
            }

            &:hover {
                justify-content: start;
                background-color: #f5f3f2;
                box-shadow: 0 3px 6px 3px rgba(7, 17, 27, .15);
            }

            &:hover .righttext {
                color: #fac03d;
                width: 90%;
            }

            .leftimg {
                transition: all 0.5s ease-in-out;
                height: 60px;
                width: 60px;
                border-radius: 50%;

                img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                    border-radius: 50%;
                }
            }

            .righttext {
                cursor: pointer;
                width: 65%;
                font-size: $font-size-m;

                @include userTheme {
                    font-family: getThemeValue("fontfamily");
                    color: getThemeValue("fontColor");
                }



                .title {
                    margin-bottom: 5px;
                    font-size: $font-size-l;
                }

                .discrib {
                    @include text-Onerow;

                    @include userTheme {
                        color: getThemeValue("fontColor")
                    }

                }
            }
        }
    }

    .apply {
        width: 70%;
        padding: 20px;

        @include userTheme {
            background-color: getThemeValue("FriendapplyColor");
            color: getThemeValue("fontColor");
        }

        margin: 20px auto;
        border-radius: 10px;

        .top {
            display: flex;
            flex-wrap: wrap;

            .note {
                width: 90%;

                span {
                    display: flex;
                    justify-content: left;
                }

                justify-content: start;
            }
        }

        .ditil {
            margin-top: 10px;

            @include userTheme {
                font-family: getThemeValue("fontfamily");
                color: getThemeValue("fontColor");
            }

        }

        .MySite {
            margin-top: 20px;
            width: 100%;
            padding: 10px;

            @include userTheme {
                background-color: getThemeValue("FriendMysiteColor");
                color: getThemeValue("fontColor");
            }


            span {
                margin-right: 5px;
            }

            li {
                @include userTheme {
                    font-family: getThemeValue("fontfamily");
                    color: getThemeValue("fontColor");
                }

                span {
                    width: 20px !important;
                }

                p {
                    word-wrap: break-word;
                }
            }
        }

        .item {
            margin: 10px 0;

            @include userTheme {
                font-family: getThemeValue("fontfamily");
                color: getThemeValue("fontColor");
            }

            height: 30px;
            width: 46.5%;
            display: flex;
            justify-content: space-around;

            span {
                display: flex;
                align-items: center;
                justify-content: right;
                font-size: $font-size-m;
                min-width: 10%;
            }

            .el-input {
                max-width: 70%;
            }
        }
    }
}

@media screen and (max-width: 650px) {
    .content {
        width: 95% !important;
        padding: 25px !important;

        .frienditem {
            width: 47% !important;
            flex: auto !important;
            max-width: none !important;
        }
    }

    .apply {
        width: 95% !important;
        padding: 5px !important;
    }
}
</style>